<template>
    <div class="detection-layout">
        <div class="side-menu">
            <MyRouterLink to="/ai/monitor" tooltip="监测信息">
                <n-icon size="18">
                    <ActionIcon.Catalog />
                </n-icon>
            </MyRouterLink>
            <MyRouterLink to="/ai/models" tooltip="模型管理">
                <n-icon size="18">
                    <ActionIcon.Robot />
                </n-icon>
            </MyRouterLink>
            <!-- <MyRouterLink to="/ai/labeling" tooltip="样本库">
                <n-icon size="14">
                    <i class="fa fa-cubes"></i>
                </n-icon>
            </MyRouterLink> -->
            <el-tooltip content="样本库" placement="right">
                <template #default>
                    <div
                        class="my-router-link"
                        custom
                        active-class="active"
                        @click="openexe('AiTranslate')">
                        <div class="nav-button">
                            <!-- <slot></slot> -->
                            <n-icon size="14">
                                <i class="fa fa-cubes"></i>
                            </n-icon>
                        </div>
                    </div>
                </template>
            </el-tooltip>
        </div>
        <div class="page-content">
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ActionIcon } from '@/common/ActionIconList'
import MyRouterLink from '../common/MyRouterLink.vue'

function openexe(
    type:
        | 'geobrowser'
        | 'labelimg'
        | 'ModelRacon'
        | '3DJudgement'
        | 'AiTranslate',
) {
    if (type == 'geobrowser') {
        window.location.href = 'Browser://E://mnt//inputdata//1650610895.tif'
    }
    if (type == 'ModelRacon') {
        window.location.href = 'ModelRecon://'
    }

    if (type == 'AiTranslate') {
        window.location.href = 'AiTranslate://'
    }

    if (type == '3DJudgement') {
        window.location.href = '3DJudgement://'
    }

    if (type == 'labelimg') {
        window.location.href = 'labelImg://E:/mnt/inputdata/'
    }

    // window.open('Browser://')
    // window.location.href="Browser:// file:///E://mnt//inputdata//1650610895.tif"
    // window.location.href="labelImg://E:/mnt/inputdata/"
    // window.location.href="vscode://E:/soft/pixel annotation"
    // window.location.href="testdizi://"
}
</script>

<style lang="scss" scoped>
@use '/src/assets/scss/color.scss' as *;

.detection-layout {
    height: 100%;
    width: 100%;
    display: flex;

    .side-menu {
        width: 50px;
        background-color: $c-gray-10;
        height: 100%;
        display: flex;
        box-sizing: border-box;
        flex-direction: column;

        justify-content: flex-start;
        align-items: center;
        gap: 5px;
        padding: 60px 0;

        .nav-button {
            // padding: 5px;

            height: 40px;
            width: 40px;

            border-radius: 4px;

            display: flex;

            align-items: center;
            background-color: $c-gray-8;
            justify-content: center;

            &:hover {
                background-color: $c-gray-7;
            }
        }
    }

    .page-content {
        width: calc(100% - 50px);
        height: 100%;
        overflow: hidden;
    }
}
</style>
